<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上海禾闹屋科技有限公司</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            color: #333;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #4CAF50;
            color: white;
            padding: 1em 0;
            text-align: center;
        }

        .video-container {
            position: relative;
            width: 80%;
            max-width: 800px;
            margin: 2em auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            overflow: hidden;
        }

        h1, h2 {
            text-align: center;
            margin: 0.5em 0;
        }

        .form-container {
            width: 80%;
            max-width: 600px;
            margin: 2em auto;
            background-color: white;
            padding: 2em;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        input[type="file"], input[type="submit"], select {
            width: 100%;
            padding: 1em;
            margin: 1em 0;
            border-radius: 4px;
            border: 1px solid #ccc;
            font-size: 1em;
        }

        input[type="submit"] {
            background-color: #4CAF50;
            color: white;
            cursor: pointer;
            border: none;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }

        select {
            background-color: white;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            cursor: pointer;
        }

        select:focus {
            border-color: #4CAF50;
            outline: none;
        }

        .select-container {
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .select-container::after {
            content: '\25BC';
            position: absolute;
            top: 50%;
            right: 1em;
            transform: translateY(-50%);
            pointer-events: none;
            color: #ccc;
        }

        .display {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin: 2em auto;
            width: 80%;
            max-width: 800px;
        }

        .image-preview {
            flex: 1;
            padding: 1em;
            text-align: center;
            background-color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            margin: 0 1em;
            min-height: 350px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .image-preview img {
            max-width: 100%;
            max-height: 300px;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        .contact_us {
            text-align: center;
            padding: 2em 0;
            background-color: #4CAF50;
            color: white;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function previewImage(inputId, previewId) {
            const fileInput = document.getElementById(inputId);
            const previewImage = document.getElementById(previewId);

            const file = fileInput.files[0];
            const reader = new FileReader();

            reader.addEventListener('load', function () {
                previewImage.src = reader.result;
            }, false);

            if (file) {
                reader.readAsDataURL(file);
            }
        }

        $(document).ready(function () {
            $('#image-form').on('submit', function (e) {
                e.preventDefault();

                let formData = new FormData(this);

                var selectElement = document.getElementById('ImageStyle')
                var selectValue = selectElement.value;
                
                formData.append('imagestyle', selectValue);
                let csrftoken = getCookie('csrftoken');
                console.log(formData.get('imagestyle'));
                $.ajax({
                    type: 'POST',
                    url: '{% url "upload_file" %}',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRFToken': csrftoken
                    },
                    success: function (response) {
                        $('#processed-image').attr('src', response.processed_file_url);
                        $('#processed-image-container').show();
                    },
                    error: function () {
                        alert('An error occurred');
                    }
                });
            });
            $('#image-form-sightseeing').on('submit', function (e) {
                e.preventDefault();

                let formData = new FormData(this);

                var selectElement = document.getElementById('ImageStyleSightseeing')
                var selectValue = selectElement.value;
                
                formData.append('sightseeingstyle', selectValue);
                let csrftoken = getCookie('csrftoken');
                console.log(formData.get('sightseeingstyle'));
                $.ajax({
                    type: 'POST',
                    url: '{% url "upload_file_sightseeing" %}',
                    data: formData,
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRFToken': csrftoken
                    },
                    success: function (response) {
                        $('#processed-image-sightseeing').attr('src', response.processed_file_url);
                        $('#processed-image-container-sightseeing').show();
                    },
                    error: function () {
                        alert('An error occurred');
                    }
                });
            });
            $('#face-detection-form').on('submit', function (e) {
                e.preventDefault();

                let formData = new FormData();
                let csrftoken = getCookie('csrftoken');

                var selectElement = document.getElementById('ImageStyle');
                var selectValue = selectElement.value;

                $.ajax({
                    type: 'POST',
                    {% comment %} url: '{% url "face_detection" %}', {% endcomment %}
                    data: {file:formData.get('file'),imagestyle:selectValue},
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-CSRFToken': csrftoken
                    },
                    success: function (response) {
                        $('#face-detection-image').attr('src', response.detected_face_url);
                        $('#face-detection-image-container').show();
                    },
                    error: function () {
                        alert('An error occurred');
                    }
                });
            });
        });

        function getCookie(name) {
            let cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                const cookies = document.cookie.split(';');
                for (let i = 0; i < cookies.length; i++) {
                    const cookie = cookies[i].trim();
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }
    </script>
</head>

<body>
    <header>
        <h1>FUNFACEFX</h1>
        <h2>上海禾闹屋科技有限公司</h2>
    </header>

    <div class="video-container">
        <video width="640" height="360" controls autoplay loop>
            <source src="/static/videos/8451bb6a5057e0151fa301fc01b4dc0b.mp4" type="video/mp4">
            您的浏览器不支持 HTML5 视频标签。
        </video>
    </div>

    <h1>Demo体验</h1>

    <div class="form-container">
        <h2>人物模型</h2>
        <form id="image-form" action="upload/" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="file" id="file—sightseeing" name="file" accept="image/*" onchange="previewImage('file—sightseeing', 'preview-image')">
            <select name="style" id="ImageStyle" class="select-container">
                <option value="cartoon">  Cartoon </option>
                <option value="3d">       3D      </option>
                <option value="design">   Design  </option>
                <option value="handdrawn">HandDraw</option>
                <option value="sktch">    Sketch  </option>
            </select>
            <input type="submit" value="上传">
        </form>
    </div>
    
    <div class="display">
        <div class="image-preview">
            <h2>图片预览:</h2>
            <img id="preview-image" src="" alt="Image Preview">
        </div>
        <div class="image-preview" id="processed-image-container" style="display: none;">
            <h2>处理后的图片:</h2>
            <img id="processed-image" src="" alt="Processed Image">
        </div>
    </div>

    <div class="form-container">
        <h2>风景模型</h2>
        <form id="image-form-sightseeing" action="upload/" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="file" id="file" name="file" accept="image/*" onchange="previewImage('file', 'preview-image-sightseeing')">
            <select name="style" id="ImageStyleSightseeing" class="select-container">
                <option value="shuicai">水彩</option>
                <option value="labi">蜡笔</option>
            </select>
            <input type="submit" value="上传">
        </form>
    </div>

    <div class="display">
        <div class="image-preview">
            <h2>图片预览:</h2>
            <img id="preview-image-sightseeing" src="" alt="Image Preview">
        </div>
        <div class="image-preview" id="processed-image-container-sightseeing" style="display: none;">
            <h2>处理后的图片:</h2>
            <img id="processed-image-sightseeing" src="" alt="Processed Image">
        </div>
    </div>

    <div class="form-container">
        <h2>人脸检测识别</h2>
        <form id="face-detection-form" action="face_detection/" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="file" id="face-file" name="file" accept="image/*" onchange="previewImage('face-file', 'face-preview-image')">
            <input type="submit" value="上传">
        </form>
    </div>

    <div class="display">
        <div class="image-preview">
            <h2>注册帧:</h2>
            <img id="face-preview-image" src="" alt="Image Preview">
        </div>

        <div class="image-preview" id="face-detection-image-container" style="display: none;">
            <h2>人脸检测结果:</h2>
            <img id="face-detection-image" src="" alt="Face Detection Result">
        </div>
    </div>

    <h1>其他demo上线准备中......</h1>

    <div class="contact_us">
        <h2>联系我们</h2>
        <p>phone call: 18397648694</p>
        <p>location: 上海市奉贤区海湾镇五四公路4399号78幢</p>
    </div>
</body>

</html>
